<ion-header>
    <ion-toolbar>
        <ion-title>
            预警
        </ion-title>
        <ion-icon name="more" class="bar-btn" slot="end" (click)="presentPopover($event)"></ion-icon>
    </ion-toolbar>
</ion-header>
<ion-content *ngIf="!userLogin">
    <Result [img]="img5" [title]="'尚未登录'" [message]="'由于您的账户还未登录，该功能暂不能使用，请登录后查看'">
        <ng-template #img5>
            <img src="https://gw.alipayobjects.com/zos/rmsportal/GIyMDJnuqmcqPLpHCSkj.svg"
                class="spe am-icon am-icon-md" alt="" />
        </ng-template>
    </Result>
    <WhiteSpace></WhiteSpace>
    <div Button [type]="'primary'" [size]="'small'" style="width: 25%; margin: 0 auto;" [routerLink]="['/login']">去登录
    </div>
</ion-content>

<ion-content *ngIf="userLogin">
    <div id="content">
        <Tabs [useOnPan]="true" [swipeable]="true" [activeTab]="0" [page]="3" [tabBarActiveTextColor]="'#1890ff'"
            (onChange)="onChange($event)" (onTabClick)="onTabClick($event)">
            <TabPane [title]="titleTemplate">
                <ng-template #titleTemplate>
                    <div>实时报警监控</div>
                </ng-template>
                <div id="toolbar">
                    <ul>
                        <li>
                            <div style="background-color: gold; border-radius: 10px;"></div>
                            提醒
                        </li>
                        <li>
                            <div style="background-color: rgb(253, 152, 0); border-radius: 10px;"></div>
                            警报
                        </li>
                        <li>
                            <div style="background-color: rgb(255, 0, 0); border-radius: 10px;"></div>
                            严重
                        </li>
                    </ul>
                </div>
                <div id="search">
                    <div class="sinput">
                        <!-- <SearchBar [placeholder]="'输入关键字搜索'" [setFocus]="autoFocus" [(ngModel)]="searchValue"
                            (ngModelChange)="search()" (onCancel)="cancel()">
                        </SearchBar> -->
                        <div class="item-input-inset" style="padding: 0">
                            <label class="item-input-wrapper">
                                <i class="icon ion-ios-search placeholder-icon"></i>
                                <ion-input type="search" placeholder="输入关键字搜索" [(ngModel)]="searchValue"
                                    (ionChange)="search()" (ionFocus)=" this.inputFocus = true; " (ionBlur)=" this.inputFocus = false; "></ion-input>
                            </label>
                            <ion-button *ngIf="inputFocus" class="button cancel-btn" size="small" fill="clear" (click)="cancel()">
                                取消
                            </ion-button>
                        </div>
                    </div>
                    <div Button class="sbutton" (click)="getAlarmList()" [size]="'small'" [type]="'primary'">刷新</div>
                </div>
                <WhiteSpace [size]="'lg'"></WhiteSpace>
                <WingBlank [size]="'lg'" *ngFor="let item of alarmList">
                    <ActivityIndicator [toast]="true" [text]="'加载中...'" [animating]="loading"></ActivityIndicator>
                    <Card>
                        <CardHeader [title]="item.name" class="title"
                            [ngStyle]="{'background-color':item.strategy.level==0?'#2ecc71':'#f1c40f'}">
                        </CardHeader>
                        <CardBody style="padding: 0px 0px 5px">
                            <div>
                                <ul
                                    [ngStyle]="{'border':item.strategy.level=='0'?'solid 1px #2ecc71':'solid 1px #f1c40f'}">
                                    <li>
                                        设备名称:<span>{{item.strategy.device.name}}</span>
                                    </li>
                                    <li>
                                        属性名称:<span>{{item.strategy.attribute.name}}</span>
                                    </li>

                                    <li>
                                        报警条件:<div
                                            style="width: 50px;height:50px;display:inline-block; vertical-align:middle; text-align: center;line-height: 25px;margin: 10px;">
                                            <span
                                                style="font-weight: bold;">{{ item.strategy.conditiona.key }}{{ item.strategy.conditiona.value }}</span><br />
                                            <span style="color: darkgray;">{{ item.strategy.attribute.name }}</span>
                                        </div>
                                        <span *ngIf="item.strategy.conditionb.value">&</span>
                                        <div *ngIf="item.strategy.conditionb.value"
                                            style="width: 50px;height:50px;display:inline-block; vertical-align:middle; text-align: center;line-height: 25px;margin: 10px;">
                                            <span
                                                style="font-weight: bold;">{{ item.strategy.conditionb.key }}{{ item.strategy.conditionb.value }}</span><br />
                                            <span style="color: darkgray;">{{ item.strategy.attribute.name }}</span>
                                        </div>
                                    </li>
                                    <li>
                                        开始时间:<span>{{item.time}}</span>
                                    </li>
                                    <li>
                                        结束时间:<span>{{item.endtime}}</span>
                                    </li>
                                    <li>
                                        报警时长:<span>{{item.duration}}</span>
                                    </li>
                                </ul>

                            </div>
                        </CardBody>
                    </Card>
                </WingBlank>
            </TabPane>
            <TabPane [title]="titleTemplate1">
                <ng-template #titleTemplate1>
                    <div>报警策略列表</div>
                </ng-template>
                <div>
                    <app-alarm-strategy-list></app-alarm-strategy-list>
                </div>
            </TabPane>
            <TabPane [title]="titleTemplate2">
                <ng-template #titleTemplate2>
                    <div>报警信息汇总</div>
                </ng-template>
                <div>
                    <app-alarm-summary></app-alarm-summary>
                </div>
            </TabPane>
            <TabPane [title]="titleTemplate3">
                <ng-template #titleTemplate3>
                    <div>报警信息详情</div>
                </ng-template>
                <div>
                    <app-alarm-detail></app-alarm-detail>
                </div>
            </TabPane>
        </Tabs>
    </div>
</ion-content>